<template>
	<view class="xy-tag" :class="[size?'xy-tag-'+size:'xy-tag',getClassName(shape,plain),getTypeClass(type,plain)]"
	 @tap="handleClick" v-if="visible">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "xy-tag",
		props: {
			type: {
				type: String,
				default: 'primary'
			},
			// '', small
			size: {
				type: String,
				default: ''
			},
			// circle, square，circleLeft，circleRight
			shape: {
				type: String,
				default: 'square'
			},
			//是否空心
			plain: {
				type: Boolean,
				default: false
			},
			//是否可见
			visible: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			handleClick() {
				this.$emit('click')
			},
			getTypeClass: function(type, plain) {
				return plain ? 'xy-' + type + '-outline' : 'xy-' + type
			},
			getClassName: function(shape, plain) {
				//circle, square，circleLeft，circleRight
				var className = plain ? 'xy-tag-outline ' : '';
				if (shape != 'square') {
					if (shape == "circle") {
						className = className + (plain ? 'xy-tag-outline-fillet' : 'xy-tag-fillet');
					} else if (shape == "circleLeft") {
						className = className + 'xy-tag-fillet-left';
					} else if (shape == "circleRight") {
						className = className + 'xy-tag-fillet-right';
					}
				}
				return className;
			}
		}
	}
</script>

<style lang="scss" scoped>
/* tag start*/

.xy-tag {
  padding: 8px 13px;
  font-size: 14px;
  border-radius: 3px;
  text-align: center;
  /* display: inline-block;
  vertical-align: middle; */
  line-height: 14px;
}

.xy-tag-middle {
  padding: 4px 4px;
  font-size: 12px;
  border-radius: 3px;
  /* display: inline-block;
  vertical-align: middle; */
  line-height: 14px;
}

.xy-tag-small {
  padding: 3px 4px;
  font-size: 12px;
  border-radius: 3px;
  /* display: inline-block;
  vertical-align: middle; */
  line-height: 12px;
}

.xy-tag-outline {
  position: relative;
  background: none;
  color: $uni-color-primary;
  font-weight: 400;
}

.xy-tag-outline::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  left: 0;
  top: 0;
  border-radius: 4px;
  border: 2px solid $uni-color-primary;
}

.xy-tag-fillet {
  border-radius: 25px;
}

.xy-white.xy-tag-fillet::after {
  border-radius: 40px;
}

.xy-tag-outline-fillet::after {
  border-radius: 40px;
}

.xy-tag-fillet-left {
  border-radius: 25px 0 0 25px;
}

.xy-tag-fillet-right {
  border-radius: 0 25px 25px 0;
}

.xy-tag-fillet-left.xy-tag-outline::after {
  border-radius: 50px 0 0 50px;
}

.xy-tag-fillet-right.xy-tag-outline::after {
  border-radius: 0 50px 50px 0;
}

/* tag end*/

/* color start*/

.xy-primary {
  background: $uni-color-primary;
  color: #fff;
}
.xy-primary-outline {
  color: $uni-color-primary;
  background: none;
}
.xy-primary-outline::after {
  border: 1px solid $uni-color-primary;
}

.xy-light-primary {
  background: $uni-color-light-primary;
  color: #fff;
}
.xy-dark-primary {
  background: $uni-color-dark-primary;
  color: #fff;
}

.xy-info {
  background: $uni-color-info;
  color: #fff;
}
.xy-info-outline {
  color: $uni-color-info;
  background: none;
}
.xy-info-outline::after {
  border: 1px solid $uni-color-info;
}

.xy-success {
  background: $uni-color-success;
  color: #fff;
}
.xy-success-outline {
  color: $uni-color-success;
  background: none;
}
.xy-success-outline::after {
  border: 1px solid $uni-color-success;
}

.xy-error {
  background: $uni-color-error;
  color: #fff;
}
.xy-error-outline {
  color: $uni-color-error;
  background: none;
}
.xy-error-outline::after {
  border: 1px solid $uni-color-error;
}

.xy-warning {
  background: $uni-color-warning;
  color: #fff;
}
.xy-warning-outline {
  color: $uni-color-warning;
  background: none;
}
.xy-warning-outline::after {
  border: 1px solid $uni-color-warning;
}

.xy-white {
  background: #fff;
  color: #333;
}
.xy-white-outline {
  color: #fff;
  background: none;
}
.xy-white-outline::after {
  border: 1px solid #fff;
}

.xy-black {
  background: #000;
  color: #fff;
}
.xy-black-outline {
  color: #333;
  background: none;
}
.xy-black-outline::after {
  border: 1px solid #333;
}

// 其他
.xy-translucent {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}

.xy-gray {
  background: #ededed;
}

.xy-phcolor-gray {
  background: #ccc;
}

.xy-divider-gray {
  background: #eaeef1;
}

.xy-btn-gray {
  background: #ededed;
  color: #999;
}

.xy-hover-gray {
  background: #f7f7f9;
}

.xy-bg-gray {
  background: #fafafa;
}

.xy-light-blue {
  background: #ecf6fd;
  color: #4dabeb;
}

.xy-light-brownish {
  background: #fcebef;
  color: #8a5966;
}

.xy-light-orange {
  background: #fef5eb;
  color: #faa851;
}

.xy-light-green {
  background: #e8f6e8;
  color: #44cf85;
}

.xy-gray-outline {
  color: #999;
  background: none;
}

.xy-gray-outline::after {
  border: 1px solid #ccc;
}

/* color end*/

</style>
